<template>
  <el-row class="addOrEdit">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="楼栋" prop="buildNum">
        <el-col :span="3">
          <el-input v-model="ruleForm.buildNum" placeholder="请输入栋号">
            <template slot="append">栋</template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="单元" prop="unitNum">
        <el-col :span="3">
          <el-input v-model="ruleForm.unitNum" placeholder="请输入单元号">
            <template slot="append">单元</template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="房号" prop="houseNum">
        <el-col :span="6">
          <el-input v-model="ruleForm.houseNum" placeholder="请输入房号"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="销售面积" prop="saleArea">
        <el-col :span="3">
          <el-input v-model="ruleForm.saleArea" placeholder="请输入销售面积">
            <template slot="append">㎡</template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="实际面积" prop="realArea">
        <el-col :span="3">
          <el-input v-model="ruleForm.realArea" placeholder="请输入实际面积">
            <template slot="append">㎡</template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="房屋类型" prop="houseType">
        <el-select v-model="ruleForm.houseType" placeholder="请选择房屋类型">
          <el-option label="商品住宅" :value="1"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" size="small" @click="submitForm('ruleForm')">{{dtype=="add"?"添加":"修改"}}</el-button>
        <el-button size="small" @click="rePrev">返回</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
  export default{
    data(){
      return {
        houseTypes:["商品房","还建房","经济适用房"],
        rules: {
          buildNum: [
            { required: true, message: '请输入楼栋号', trigger: 'blur' }
          ],
          unitNum: [
            { required: true, message: '请选择单元', trigger: 'blur' }
          ],
          houseNum: [
            {  required: true, message: '请输入房号', trigger: 'blur' }
          ],
          saleArea: [
            { required: false, message: '请输入销售面积', trigger: 'change' }
          ],
          realArea: [
            { required: false, message: '请输入实际面积', trigger: 'change' }
          ],
          houseType: [
            { required: false, message: '请选择房屋类型', trigger: 'change' }
          ]
        }
      }
    },
    props:{
      dtype:{
        type:String,
        default:"add"
      },
      ruleForm:{
        type:Object,
        default(){
          return {
            communityId:"",
            houseId:"",
            buildNum:"",
            unitNum:"",
            houseNum:"",
            saleArea:"",
            realArea:"",
            houseType:"",
            isAuth:"",
            usable:"",
            createTime:""
          }
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = "/house/"+(this.dtype=="add"?"add":"modify");
            this.$http
              .fetch(url, this.ruleForm)
              .then(res => {
                this.$emit("rePrev",true);
              })
              .catch(err => {});
          } else {
            return false;
          }
        });
      },
      rePrev() {
        this.$emit("rePrev");
      }
    }
  }
</script>

<style>
</style>
